import * as filters from './index'
import VsTooltip from '@/components/VsTooltip'
const install = Vue => {
    //引入全局过滤器
    Object.keys(filters).forEach(key => {
        Vue.filter(key, filters[key])
    })
    //自定义图片懒加载
    // Vue.directive('lazy', {
    //     bind: function(el,{value}){
    //         el.src = require('@/assets/images/loading2.gif');
    //         let img = new Image();
    //         img.src = value;
    //         img.onload = ()=>{
    //             el.src = value
    //         }
    //         img.onerror = ()=>{
    //             el.src = require('@/assets/images/404.jpg');;
    //         }
    //     },
    //     update (el,{value}) {
    //         el.src = value
    //     },
    // })
    // 输入框只能输入正整数 默认参数2 v-enter-money
    Vue.directive("enterMoney", {
        bind: function(el, { value = 2 }) {
            el = el.nodeName == "INPUT" ? el : el.children[0];
            if(!el||el.nodeName != "INPUT")return
            let RegStr = value == 0 ? `^[\\+\\-]?\\d+\\d{0,0}` : `^[\\+\\-]?\\d+\\.?\\d{0,${value}}`;
            el.addEventListener("keyup", function() {
                if(value==0)el.value = el.value.replace(".","")
                el.value = el.value.replace("-","")
                el.value = el.value.match(new RegExp(RegStr, "g"));
                el.dispatchEvent(new Event("input"));
            });
        }
    });

    // 介于v-if与v-sho之间
    Vue.directive('hiShow', {
        // bind函数一般用来做初始化数据，也可以绑定事件什么的
        bind(el, binding, vnode) {
            // console.log(el, binding.value, vnode);
            // el参数是当前使用指令的元素，bind参数是指令绑定的数据，vnode是虚拟dom
            const flag = binding.value // 找到组件中绑定的标识
            if (flag == false) {
                // el.style.display = 'none'
            } else {
                el.style.display = 'block'
            }
        },
        // inserted函数是在元素插入dom节点调用
        inserted(el, binding, vnode) {
            if (!binding.value) {
                const comment = document.createComment(' ');
                // Object.defineProperty(comment, 'setAttribute', {
                //   value: () => undefined,
                // });
                // vnode.elm = comment;
                // vnode.text = ' ';
                // vnode.isComment = true;
                // vnode.context = undefined;
                // vnode.tag = undefined;
                // vnode.data.directives = undefined;
                // if (vnode.componentInstance) {
                //   vnode.componentInstance.$el = comment;
                // }
                if (el.parentNode) {
                  el.parentNode.replaceChild(comment, el);
                }
            }
        },
        // update和componentUpdated都是更新使用，但是前者更加常用些，oldVnode参数只有在这两个钩子中才会有
        componentUpdated(el, binding, vnode, oldVnode) { },
        update(el, binding, vnode, oldVnode) {
            const flag = binding.value
            if (flag == false) {
                el.style.display = 'none'
            } else {
                el.style.display = 'block'
            }
        },
        // unbind解绑时候使用，比如用来移除第一个bind函数中绑定的事件
        unbind(el, binding, vnode) { }
    });

    Vue.component("VsTooltip",VsTooltip)
}

export default {
	install
}